<template>
    <view class="containers">
        <scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" style="height:90vh;">
            <view class="top" :style="{ backgroundImage: 'url(' + hbbj + ')' }">
                <text @click="chanageTab(1)" :class="[model.type == 1 ? 'hb' : '']">全平台红包</text>
                <!-- <text @click="chanageTab(2)" :class="[model.type == 2 ? 'hb' : '']">板块内红包</text> -->
            </view>
            <!-- 		<view v-if="model.type == 2" class="u-m-l-20">
				<u-form class="bknhb" :model="model" :rules="rules" ref="uForm" :errorType="errorType">
					<u-form-item class="u-m-l-30 u-m-r-30" label-width="200" :label-position="labelPosition" label="我的名称" prop="companyName">
						<u-input :border="border" placeholder="请输入" v-model="model.companyName" type="text" input-align="right"></u-input>
					</u-form-item>
					<u-form-item class="u-m-l-30 u-m-r-30" :label-position="labelPosition" label="红包描述" label-width="250" prop="cate">
						<u-checkbox-group v-model="model.cate" @change="hbmsChange">
							<u-checkbox v-model="item.checked" v-for="(item, index) in checkboxList" :key="index" :name="item.name">{{ item.name }}</u-checkbox>
						</u-checkbox-group>
					</u-form-item>
					<u-form-item class="u-m-l-30 u-m-r-30" label-width="200" :label-position="labelPosition" label="红包金额" prop="money">
						<u-input :border="border" placeholder="请输入金额元" v-model="model.money" @blur="showMoney" type="text" input-align="right"></u-input>
					</u-form-item>
					<u-form-item class="u-m-l-30 u-m-r-30" border-bottom="false" label-width="200" :label-position="labelPosition" label="红包个数" prop="num">
						<u-input :border="border" placeholder="请输入个数个" v-model="model.num" type="text" input-align="right"></u-input>
					</u-form-item>
				</u-form>
				<u-form-item class="zwpj u-m-r-30 " :label-position="labelPosition"  prop="remark">
					<u-input  type="textarea" :border="border" placeholder="请输入您的祝福语吧！" v-model="model.remark" />
				</u-form-item>
				<view class="">
					<view class="jq">
						<text class="">￥{{money}}</text>
					</view>
					
					<u-button class="button" @click="onClick">塞钱进红包</u-button>
				</view>
		</view> -->
            <view class="u-m-l-20">
                <u-form class="qpthb" :required="required" :model="model" :rules="rules" ref="uForm" :errorType="errorType">
                    <u-form-item class="u-m-l-30 u-m-r-30" label-width="200" :label-position="labelPosition" label="我的名称" prop="companyName">
                        <u-input :border="border" placeholder="请输入我的名称" v-model="model.companyName" type="text" input-align="right"></u-input>
                    </u-form-item>
                    <u-form-item class="u-m-l-30 u-m-r-30" :label-position="labelPosition" label="红包描述" label-width="250" prop="cate">
                        <u-checkbox-group v-model="model.cate" @change="hbmsChange">
                            <u-checkbox v-model="item.checked" v-for="(item, index) in checkboxList" :key="index" :name="item.name">{{ item.name }}</u-checkbox>
                        </u-checkbox-group>
                    </u-form-item>
                    <u-form-item class="u-m-l-30 u-m-r-30" :label-position="labelPosition" label="红包范围" label-width="250" prop="ranges">
                        <u-radio-group v-model="model.ranges">
                            <u-radio name="1">范围</u-radio>
                            <u-radio name="2">同城</u-radio>
                            <u-radio name="3">全网</u-radio>
                        </u-radio-group>
                    </u-form-item>
                    <!-- <u-form-item class="u-m-l-30 u-m-r-30" :label-position="labelPosition" label="到账方式" label-width="250" prop="payMethod">
						<u-checkbox-group v-model="model.payMethod" @change="dzfsChange">
							<u-checkbox v-model="item.checked" v-for="(item, index) in checkboxList2" :key="index" :name="item.name">{{ item.name }}</u-checkbox>
						</u-checkbox-group>
					</u-form-item> -->
                    <u-form-item
                        :required="required"
                        v-if="model.ranges === '1'"
                        class="u-m-l-30 u-m-r-30"
                        label-width="200"
                        :label-position="labelPosition"
                        label="地域"
                        prop="dy"
                    >
                        <u-input :border="border" placeholder="请输入地域" v-model="model.dy" type="text" @click="showDy" input-align="right"></u-input>
                    </u-form-item>
                    <u-form-item
                        :required="required"
                        v-if="model.ranges === '1'"
                        class="u-m-l-30 u-m-r-30"
                        label-width="200"
                        :label-position="labelPosition"
                        label="领域"
                        prop="ly"
                    >
                        <u-input :border="border" placeholder="请输入领域" v-model="model.ly" type="text" @click="showly" input-align="right"></u-input>
                    </u-form-item>
                    <u-form-item :required="required" class="u-m-l-30 u-m-r-30" label-width="200" :label-position="labelPosition" label="红包金额" prop="money">
                        <u-input :border="border" placeholder="请输入智汇币" v-model="model.money" type="text" @blur="showMoney" input-align="right"></u-input>
                    </u-form-item>
                    <u-form-item :required="required" class="u-m-l-30 u-m-r-30" label-width="200" :label-position="labelPosition" label="红包个数" prop="num">
                        <u-input :border="border" placeholder="请输入个数" v-model="model.num" type="text" input-align="right"></u-input>
                    </u-form-item>
                </u-form>
                <u-form-item class="  zwpj  u-m-r-30 " :label-position="labelPosition" prop="remark">
                    <u-input type="textarea" :border="border" placeholder="请输入您的祝福语吧！" v-model="model.remark" />
                </u-form-item>
                <view class="">
                    <view class="jq">
                        <text class="">￥{{ money }}</text>
                    </view>

                    <u-button class="button" @click="onClick">塞钱进红包</u-button>
                </view>
            </view>
        </scroll-view>
        <TriTree ref="triTree" :range="fetchDict" @confirm="handleTreeChange" clear></TriTree>
        <Select v-model="isSelectShow" @city-change="handleCityChange"></Select>
    </view>
</template>

<script>
import Select from '@/components/u-city-select.vue';

export default {
    components: { Select },
    name: 'm-red',
    onLoad() {
        this.dictionaryFetchDict();

        setTimeout(() => {
            this.dictionaryFetchDict();
        }, 2000);

        setTimeout(() => {
            this.dictionaryFetchDict();
        }, 4000);
    },
    watch: {
        'model.ranges': function() {
            this.dictionaryFetchDict();
        }
    },
    props: {
        datas: Array, //数据
        type: {
            //布局格式，长方形oblong，正方形square
            type: String,
            default: 'square'
        },
        columnNum: {
            //每一行有多少个
            type: [Number, String],
            default: 3
        },
        showOutBorder: {
            //显示外边框
            type: [Boolean, String],
            default: true
        },
        showBorder: {
            //是否显示border，如果为false，showOutBorder无效
            type: [Boolean, String],
            default: true
        }
    },
    data() {
        return {
            fetchDict: [],
            isSelectShow: false,
            scrollTop: 0,
            old: {
                scrollTop: 0
            },
            money: '',
            border: false,
            hbbj: '../../static/img/hbtbbj.png',
            currentTab: 0,

            model: {
                cate: '',
                companyName: '',
                money: '',
                num: '',
                payMethod: '',
                ranges: '2',
                remark: '',
                type: 1,
                dy: '',
                ly: ''
            },
            selectList: [
                {
                    value: '测试1',
                    label: '测试1'
                },
                {
                    value: '测试2',
                    label: '测试2'
                },
                {
                    value: '测试3',
                    label: '测试3'
                }
            ],
            checkboxList: [
                {
                    name: '推广',
                    checked: false,
                    disabled: false
                },
                {
                    name: '慰问',
                    checked: false,
                    disabled: false
                },
                {
                    name: '娱乐',
                    checked: false,
                    disabled: false
                }
            ],
            checkboxList1: [
                {
                    name: '范围',

                    value: '1'
                },
                {
                    name: '同城',

                    value: '2'
                },
                {
                    name: '全网',

                    value: '3'
                }
            ],
            checkboxList2: [
                {
                    name: '即时',
                    checked: false,
                    disabled: false
                },
                {
                    name: '页面浏览',
                    checked: false,
                    disabled: false
                }
            ],
            rules: {
                companyName: [
                    {
                        required: false,
                        message: '请输入企业名称',
                        trigger: 'change'
                    }
                ],
                money: [
                    {
                        required: false,
                        message: '请输入红包金额',
                        trigger: 'change'
                    }
                ],
                num: [
                    {
                        required: false,
                        message: '请输入红包个数',
                        trigger: 'change'
                    }
                ]
            },
            required: false,
            check: false,
            selectStatus: 'close',
            selectShowZyp: false,
            selectShowWs: false,
            selectShowWxy: false,
            selectShowWyx: false,
            selectShowQylx: false,
            selectShowQydy: false,
            selectShowLyxy: false,
            labelPosition: 'left',
            codeTips: '',
            errorType: ['toast']
        };
    },
    methods: {
        upper: function(e) {
            console.log(e);
        },
        lower: function(e) {
            console.log(e);
        },
        scroll: function(e) {
            console.log(e);
            this.old.scrollTop = e.detail.scrollTop;
        },
        handleCityChange(e) {
            const { area, city, province } = e;

            let value = '';

            if (province) {
                value = province.label;
            }

            if (city) {
                value += '-' + city.label;
            }

            if (area) {
                value += '-' + area.label;
            }

            this.model.dy = value;
        },
        showMoney(e) {
            console.log(e);
            this.money = e;
        },
        showly() {
            this.$refs.triTree._show();
        },
        showDy() {
            this.isSelectShow = true;
        },
        hbmsChange(e) {
            this.model.cate = e.join(',');
        },
        async dictionaryFetchDict(keyWords) {
            const params = { keys: ['all_adept_field'] };
            let result = await this.$apis.fetchMultipleKey(params);

            this.fetchDict = result.data?.all_adept_field || [];

            this.$forceUpdate();

            setTimeout(() => {
                this.fetchDict = result.data?.all_adept_field || [];

                this.$forceUpdate();
            }, 1000);

            setTimeout(() => {
                this.fetchDict = result.data?.all_adept_field || [];

                this.$forceUpdate();
            }, 2000);
        },
        handleTreeChange(e) {
            this.model.ly = e
                .map(item => {
                    return item.label;
                })
                .join(',');
        },
        dzfsChange(e) {
            this.model.payMethod = e.join(',');
        },
        hbfwChange(e) {
            console.log(e);
            this.model.ranges = e;
        },
        chanageTab(type) {
            this.model.type = type;
        },
        onClick() {
            this.$emit('click', {
                model: this.model
            });
        }
    }
};
</script>

<style scoped lang="scss">
page,
.containers {
    background-color: #f4f4f4;
    overflow: auto;
}
.top {
    background-repeat: no-repeat;
    background-size: 100% 500rpx;
    background-position: 0 -20px;

    display: flex;
    flex-direction: row;
    justify-content: space-around;
    padding: 58rpx 30rpx 450rpx 30rpx;
    text {
        color: #ffffff;
        font-size: 28rpx;
    }
    .hb {
        width: 226rpx;
        height: 60rpx;
        background: #e04a24;
        border-radius: 30rpx;
        text-align: center;
        line-height: 60rpx;
    }
}
.zwpj {
    width: 710rpx;
    height: 193rpx;
    background-color: #ffffff;
    margin-top: 20rpx;
    font-size: 30rpx;
    color: #888d99;
    border-radius: 20rpx;
    line-height: 44rpx;
}
.bknhb {
    margin-top: -400rpx;
    width: 710rpx;
    height: 470rpx;
    background-color: #ffffff;
    border-radius: 20rpx;
}
.button {
    width: 662rpx;
    margin: 50rpx auto 102rpx auto;
    background: #ea5e3a;
    border-radius: 40rpx;
    border: 0;
    color: #fff;
    &.u-hairline-border:after {
        border: 0;
    }
}
.jq {
    color: #0d1d36;
    font-size: 50rpx;
    font-weight: bold;
    text-align: center;
    margin-top: 60rpx;
    padding-right: 20rpx;
}
.qpthb {
    margin-top: -400rpx;
    width: 710rpx;
    max-height: 800rpx;
    background-color: #ffffff;
    border-radius: 20rpx;
}
</style>
